<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head>
<base href="<%=basePath%>">
<title>流量分析</title>
<link rel="stylesheet" type="text/css"
	href="css/jqplot/jquery.jqplot.min.css" />
<link href="css/calendar.css" rel="stylesheet" type="text/css">
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="js/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.divbox.js"></script>

<script type="text/javascript" src="js/calendar-zh.js"></script>
<script type="text/javascript" src="js/calendar-setup.js"></script>

<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
	src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript"
	src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript"
	src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>



<style>
#flowMap {
	position: absolute;
	width: 1030px;
	font-size: 12px;
	background: #fff;
	border: 2px solid #000;
	z-index: 2;
	display: none;
}

#countMap {
	position: left;
	width: 500px;
}

#table1 {
	width: 508px;
	float: right;
	margin-right: 2px;
}

#table1 tr {
	border: 1px solid #fff;
	height: 20px;
}

#table1 td {
	border: 1px solid #fff;
}

.table1 td {
	text-align: center;
	border-bottom: 1px #fff solid;
	font-family: "宋体";
	font-size: 14px;
	border-right: 1px #fff solid;
	background: #EEEEEE;
}

.current_table_1 {
	font-size: 12px;
}


.jqplot-title {
	height: 18px;
}

.table_06 {
	width: 100%;
	margin: 20px auto;
	border-left: 1px #bbcddb solid;
	border-top: 1px #bbcddb solid;
	background-color: #f6f7f9;
}
/*-----------------------修改饼图样式-------------------------- */
div.jqplot-table-legend-swatch-outline {
/* border: 1px solid #ccc; */
padding: 1px;
}

</style>
<script>
var plot=null;
var plot1=null;
	function bodyload(isres) {
		
		loadpage("");
	}
	//页面加载
	function loadpage(date) {
		$.openLoading();
		$.ajax({
					url : "transManagerFlowChart/queryDetialGatewayTxLog",
					type : 'POST',
					async : true,
					data : {
						date : date
					},
					dataType : 'json',
					success : function(obj) {
						$.closeLoading();
						if($.validate(obj))return;
						
						//权限判断（普通用户连接不能使用）
						var buttonStr = "<a href='' style='font-size:12px;font-family:宋体;font-weight:normal' onClick='showFlowMap(this);return false'>查看</a>";
						var divContent = creatTable("appId@TDH,appName,successCount,failCount,total",obj, buttonStr);
						$("#transcountTb").find("tbody").remove();
						$("#transcountTb").append(divContent);
						
					}
				});
	}
	//弹出div层，显示选中渠道的流量图
	function showFlowMap(obj) {
		var appId = obj.parentElement.parentElement.childNodes[0].innerHTML;
		var appName = obj.parentElement.parentElement.childNodes[1].innerHTML;
		
		var total = obj.parentElement.parentElement.childNodes[4].innerHTML;
		if(total=='0'){
			$.message("error","该应用暂无数据");
			return false;
		}
		
		
		var date = $("#operateDate").val();
		//加载流量图
		chatDateLoad(appId, date);
		//加载饼状图
		loadPieChatMap(appId, date, appName);
		//加载数据列表
		loadDataList(appId, date, "");
		$("#flowMap").OpenDiv3();
	}
	//加载饼状图
	function loadPieChatMap(appId, date, appName) {
		$.ajax({
			url : "transManagerFlowChart/querGatewayTxLog",
			type : 'POST',
			async : true,
			data : {
				appId : appId,
				date : date
			},
			dataType : 'json',
			success : function(obj) {
				if($.validate(obj))return;
				
				createPie(obj, appName);
			}
		});

	}
	//加载数据列表
	function loadDataList(appId, date, channel_Name) {
		$.ajax({
			url : "transManagerFlowChart/querErrorGatewayTxLog",
			type : 'POST',
			async : true,
			data : {
				appId : appId,
				date : date
			},
			dataType : 'json',
			success : function(obj) {
				if($.validate(obj))return;
				
				var list = $("td[name='same']");
				for (var i = 0; i < list.length; i++) {
					list[i].innerHTML = 0;
				}
				var list = obj.data;
				var successTotal = 0;
				var errorTotal = 0;
				var othererror=0;
				for (var j = 0; j < list.length; j++) {
					var amount = list[j].amount;
					var errorCode = list[j].errorCode;
					if (errorCode == null || errorCode == "" || errorCode == "0000" || errorCode == "00") {
						errorCode = "bingo";
						successTotal = successTotal+amount;
						errorTotal = errorTotal - amount;
					}
					if (null != errorCode && errorCode != "") {
						if("bingo" == errorCode){
							$("#" + errorCode + "")[0].innerHTML = successTotal;
						}else if($("#" + errorCode + "")[0]){
							$("#" + errorCode + "")[0].innerHTML = amount;
						}else{
							othererror=othererror+amount;
							$("#9001")[0].innerHTML = othererror;
						}
						
						errorTotal = errorTotal + amount;
					}
				}
			}
		});
	}
	
	
	//加载柱状图
	function chatDateLoad(appId, date) {
		$.ajax({
			url : "transManagerFlowChart/queryChatDateLoad",
			type : 'POST',
			async : true,
			data : {
				appId : appId,
				date : date
			},
			dataType : 'json',
			success : function(chatData) {
				if($.validate(chatData))return;
			
				var data = chatData.data;
				var error = new Array(23);
				var success = new Array(23);
				for (var i = 0; i < error.length; i++) {
					error[i] = '';
					success[i] = '';
				}
				for (var j = 0; j < data.length; j++) {
					var hour = data[j].hour;
					var failCount = data[j].failCount;
					var successCount = data[j].successCount;
					error[hour] = parseInt(failCount);
					success[hour] = parseInt(successCount);
				}
				createLine(success, error);
			}
		});
	}
	
	
	
	
	//加载饼图
	function createPie(data, title) {

		var datalist = data.data;
		var length = datalist.length;
		var line = new Array(length);

		var total = 0;
		<%-- added by gzz@20150403 for redmine code 68 --%>
		var other = '';
		var sumNum= 0;
		<%-- added by gzz@20150403 for redmine code 68 --%>
		for(var i in datalist) { 
			   total += parseInt(datalist[i].amount);
			} 
		
		//转换百分比，不保留小数
		Number.prototype.toPercent = function(){
			return (Math.round(this * 10000)/100).toFixed(0) + '%';
		}

		//右边table中，显示 合作伙伴 + 百分比
		for (var i = 0; i < length; i++) {
			if(i>9)
			{
				line[i] = [ "<div style='float:left;text-align:left;'>&nbsp;其他 : &nbsp;&nbsp;</div>"+"<div style='float:right;text-align:right;'>&nbsp;&nbsp;"+(100 - sumNum)+"%&nbsp;&nbsp;</div>", parseInt(100 - sumNum)];
				break;
			}
			line[i] = [ "<div style='float:left;text-align:left;'>&nbsp;"+datalist[i].channelName+"&nbsp;&nbsp;</div>"+"<div style='float:right;text-align:right;'>&nbsp;&nbsp;"+(parseInt(datalist[i].amount)/total).toPercent()+"&nbsp;&nbsp;</div>", parseInt(datalist[i].amount) ];
			other = (parseInt(datalist[i].amount)/total).toPercent();
			sumNum += parseInt(other.substr(0,other.length-1));
		}
		if(length==0){
			line=[[]];
		}
		plot = $.jqplot('chart', [ line ], {
			seriesDefaults : {
				fill : true,
				showMarker : false,
				shadow : false,

				renderer : $.jqplot.PieRenderer,
				rendererOptions : {
					showDataLabels : false, //每个饼块上是否显示百分比
					diameter : 180,
					// 设置饼的直径 
					padding : 20,
					// 饼距离其分类名称框或者图表边框的距离，变相该表饼的直径 
					sliceMargin : 6,
					// 饼的每个部分之间的距离 
					fill : true,
					// 设置饼的每部分被填充的状态 
					shadow : true,
					//为饼的每个部分的边框设置阴影，以突出其立体效果 
					shadowOffset : 2,
					//设置阴影区域偏移出饼的每部分边框的距离 
					shadowDepth : 5,
					// 设置阴影区域的深度 
					shadowAlpha : 0.07,
				// 设置阴影区域的透明度 
					lineWidth: 8
				}
			},
			title : title,
			legend : {
				show : true,
				//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） 
				location : 'e',
				// 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
				xoffset : 12,
				// 分类名称框距图表区域上边框的距离（单位px） 
				yoffset : 12
			// 分类名称框距图表区域左边框的距离(单位px) 
			},grid:   {  
				borderWidth: 0,           //设置图表的（最外侧）边框宽度    
			    shadow:  false,
			    background: '#eeeeee'
			}
		});
		
	}
	
	
	function createLine(success, error) {
		var ticks = [ '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
				'06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00',
				'13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
				'20:00', '21:00', '22:00', '23:00' ];
		if(success.length==0){
			success=[];
		}
		
		plot1 = $.jqplot('chart1', [ success, error ], {
			animate : !jQuery.jqplot.use_excanvas,
			stackSeries : true,
			captureRightClick : true,
			seriesDefaults : {
				renderer : $.jqplot.BarRenderer,
				rendererOptions : {
					//barMargin: 30,
					highlightMouseDown : true
				},
				pointLabels : {
					show : true,
					stackedValue : true
				//显示所有系列的累积值
				}
			},
			axes : {
				xaxis : {
					renderer : $.jqplot.CategoryAxisRenderer,
					// 设置横（纵）轴上数据加载的渲染器
					ticks : ticks, //设置横（纵）坐标的刻度上的值，可为该ticks数组中的值
					tickOptions : {
						showMark : false,
						showGridline : false
					}
				},
				yaxis : {
					min : 0,
					//max:20//设置y轴的最大值和最小值
					pad : 1.05, // 一个相乘因子  
					tickOptions : {
						showMark : false
					}
				}
			},
			legend : {
				show : true,
				location : 'e',
				placement : 'outside'
			},
			grid:   {
			    background: '#fff'
			},
			series : [ {
				fill : true,
				label : '成功',
				color : '#33CC66'
			}, {
				fill : true,
				label : '失败',
				color : '#CC6633'
			} ]
		});
	}
	function closeDiv() {
		$("#flowMap").CloseDiv3();
		$('#chart').html("");
		$('#chart1').html("");
		if(plot){
			plot.destroy();
		}
		if(plot1){
			plot1.destroy();
		}
		
	}
	function queryByDate() {
		loadpage($("#operateDate").val());
	}
</script>
</head>

<body onLoad="bodyload(false)">
	<div class="current">
           <table class="current_table_1">
              <tbody>
                <tr class="f2">
                  <td>
                    <img src="./images/current_1.jpg">
                  </td>
                  <td class="current_table_1_td">
                    <img src="images/current_1.png">&nbsp;您现在的位置：&nbsp;
                      <span style=" color:#136bab; ">统计分析
                      <span style="padding:0 5px; font-weight:bold; line-height:28px;">&gt;</span>流量分析
                  </span>
                  </td>
                  <td><img src="./images/current_3.jpg"></td>
              </tr>
           </tbody>
         </table>
      </div>
		<div id="divMain" align="center" class="main">
			<table class="table_10" id="table">
				<tr>
					<td>
						<table
							style="width: 100%; margin: 0 auto; text-align: right; line-height: 20px;">
							<tbody>
								<tr height="20px">
									<td width="100%" style="float: right; font-size: 12px;"
										height="20px">交易日期： <input id="operateDate"
										onkeydown="false"
										onclick="showCalendar2('operateDate','y-mm-dd','transMonitoringMain');"
										class="input_time" style="margin-right: 10px;" type="text">
									</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						<table id="transcountTb" class="table_06">
							<thead>
								<tr>
									<th width="20%">应用接口</th>
									<th width="20%">成功交易流量</th>
									<th width="20%">失败交易流量</th>
									<th width="20%">总流量</th>
									<th width="20%">流量图</th>
								</tr>
							</thead>
						</table>
					</td>
				</tr>
			</table>
		</div>

	</div>
	<div id="flowMap" style="display:none;width:1030px" >
			
			<div class="table_title_div">
					<table class="table_title" style='width:100%;height: 20px;'>
						<tr>
						<td width="10%"></td>
						<td width="80%" id="interfaceName"></td>
						<td width="10%" align="right"><img src="<%=path %>/images/closedown.gif" alt="关闭"  onclick="closeDiv()"/></td>
						</tr>
					</table>
			</div>
			<input type="hidden" id="appId" value="">
		<table height="200px">
			<tr>
				<td>
					<div id="chart1"
						style="margin-left: 20px; width: 910px; height: 200px; position: relative;"
						class="jqplot-target"></div>
				</td>
			</tr>
		</table>
		<h4 style='width:100%; background-color: #A4BDE3'>
			<table height="20px" style='width: 100%; font-family: "宋体"; font-size: 14px; font-weight: bold'>
				<tr>
					<td align="center">合作伙伴交易占比统计</td>
				</tr>
			</table>
		</h4>
		<table style='width: 100%;'>
			<tr>
				<td>
					<div id="chart" style="width: 508px; height: 241px; float: left; position: relative;background: #eee;border: 1px solid #fff;">
					</div>
				</td>
				<td>
					<table id="table1" class="table1">
						<tr>
							<td width="80%" colspan="2">成功</td>
							<td width="20%" id="bingo" name="same">0</td>
						</tr>
						<tr>
							<td width="20%" rowspan="11">异常</td>
							<td width="60%">协议不匹配</td>
							<td width="20%" name="same" id="1001">0</td>
						</tr>
						<tr>
							<td width="60%">报文过长</td>
							<td width="20%" name="same" id="1002">0</td>
						</tr>
						<tr>
							<td width="60%">加解密失败</td>
							<td width="20%" name="same" id="1003">0</td>
						</tr>
						<tr>
							<td width="60%">地址未授权</td>
							<td width="20%" name="same" id="2001">0</td>
						</tr>
						<tr>
							<td width="60%">用户名密码错误</td>
							<td width="20%" name="same" id="2002">0</td>
						</tr>
						<tr>
							<td width="60%">数据校验错误</td>
							<td width="20%" name="same" id="3002">0</td>
						</tr>
						<tr>
							<td width="60%">连接超时</td>
							<td width="20%" name="same" id="4001">0</td>
						</tr>
						<tr>
							<td width="60%">连接失败</td>
							<td width="20%" name="same" id="4002">0</td>
						</tr>
						<tr>
							<td width="60%">交易失败</td>
							<td width="20%" name="same" id="5001">0</td>
						</tr>
						<tr>
							<td width="60%">其他</td>
							<td width="20%" name="same" id="9001">0</td>
						</tr>
						<tr>
							<td width="80%" colspan="3"><input class="input_button_2"
								type="button" value="查看全部"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div id="Loading" style="display: none" align="center">
		<img src="./images/loading.gif" />
	</div>
</body>

</html>